<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.png" mode="aspectFill"></image>

    <view class="bar-box" :style="{ marginTop: titleMargin + 'px' }">
      <image class="back" src="/static/images/back.png" @click="back"></image>
      <view class="title">温馨提示</view>
    </view>

    <view class="msg-box">
      <text>尊敬的用户：</text>
      <text class="msg">{{ tips }}</text>
      <view class="btn-box">
        <button class="contact" open-type="contact" plain>联系客服</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '温馨提示',
      titleMargin: 0,
      tips: ''
    };
  },

  created() {
    this.setDynamicMargin(); // 设置动态间距
  },

  onShow() {
    var user_id = uni.getStorageSync('user_id') ? uni.getStorageSync('user_id') : 0;
    if (user_id == 0) uni.hideShareMenu();  // 隐藏系统分享按钮
  },

  onLoad: function (options) {
    var type = options.type ? options.type : 1;

    this.$http.post('/index/Api/getTips', {type}).then(res => {
      this.tips = res.data.data;
    })
  },

  methods: {
    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    back: function () {
      uni.navigateBack();
    },
  },
}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10rpx;

  .title {
    font-size: 40rpx;
    text-align: center;
  }

  .msg-box {
    width: calc(91% - 80rpx);
    background: $main-background;
    margin: 40rpx 0;
    border-radius: 20rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 80rpx 40rpx;
    height: 40vh;

    text {
      font-size: 36rpx;
      color: $main-blank;
    }

    .msg {
      margin-top: 20rpx;
      text-indent: 2em;
    }

    .btn-box {
      display: flex;
      justify-content: center;
      margin-top: 120rpx;

      .contact {
        margin-top: 50rpx;
        border-radius: 50rpx;
        border: 2rpx solid $main-color;
        color: $main-color;
        padding: 0 120rpx;
      }
    }

  }
}
</style>
